<template>
  <div class="wrap">
    <div class="bgWrap">
      <div class="inputWrapItem" v-for="(item, index) in resShopTypeList" :key="index">
        <p class="sizeName">{{ item.title }}</p>
        <div class="eidorIconRight">
          <!-- <img src="@/assets/eidtor4.png" alt="" class="eidtoricon" /> -->
          <img src="@/assets/eidtor3.png" alt="" class="eidtoricon" @click="sortOrder(item,0)"/>
          <img src="@/assets/eidtor3.png" alt="" class="eidtoricon eidtoricon2" @click="sortOrder(item,1)"/>
          <img
            src="@/assets/eidtor1.png"
            alt=""
            class="eidtoricon"
            @click="eidtorSort(item)"
          />
          <img
            src="@/assets/eidtor2.png"
            alt=""
            class="eidtoricon"
            @click="deleSort(item)"
          />
        </div>
      </div>
    </div>
    <div class="addSort" @click="showMask = true">
      <img src="@/assets/add.png" alt="" class="add" />
      添加分类
    </div>
    <div class="finish" @click="complete">完成</div>
    <!-- 遮罩层-入驻说明 -->
    <div class="maskWrap" v-if="showMask">
      <div class="maskBg" @click="showMask = false"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">{{ eidtorData ? eidtorData.title : "分类名称" }}</div>
        <div class="maskExpalin">
          <input
            type=""
            name=""
            value=""
            v-model="inputSortName"
            maxlength="10"
            placeholder="请填写分类名称(10字内)"
          />
        </div>
        <div class="maskBack">
          <div class="btn btnDele" @click="cancel">取消</div>
          <div class="btn" @click="sureAdd">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import {
  apiPlatformGetUserShopDetails,
  apiGetGoodsTypeList,
  apiAddGoodsType,
  apiDelGoodsType,
  apiEditGoodsType,
  apieditGoodsTypeOrderNum,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      showMask: false,
      fromId: this.$route.query.fromId, //从增加规格回来的0，编辑回来的为1
      shopGoodsSpecsList: "", //规格
      shopId: "", //店铺id
      resShopTypeList: [], //分类列表
      inputSortName: "", //输入的新的商品类型
      eidtorData: "", //要编辑的商品分类数据
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getShopDetails();
  },
  methods: {
    //添加商品分类：
    getAddGoodsType() {
      apiAddGoodsType({
        shopId: this.shopId,
        title: this.inputSortName,
      }).then((res) => {
        if (res.code == 200) {
          this.showMask = false;
          this.$toast.success("添加成功");
          this.platformTypeList();
        }
      });
    },
    //修改商品分类：
    getEditGoodsType() {
      apiEditGoodsType({
        id: this.eidtorData.id,
        shopId: this.shopId,
        title: this.inputSortName,
      }).then((res) => {
        if (res.code == 200) {
          this.showMask = false;
          this.$toast.success("编辑成功");
          this.eidtorData = "";
          this.inputSortName = "";
          this.platformTypeList();
        }
      });
    },
    //编辑商品分类:
    eidtorSort(itemData) {
      this.eidtorData = itemData;
      this.inputSortName = itemData.title;
      this.showMask = true;
    },
    //调整商品分类顺序:
    sortOrder(itemData,way) {
      var orderNum = itemData.orderNum*1
      if(way==0){ //向下操作 顺序+1
       orderNum=orderNum+1
       if(orderNum>this.resShopTypeList.length){
        this.$toast.fail('已在最底部不能再降啦~')
        return
       }
      }else{  //向上操作 顺序-1
       orderNum=orderNum-1
       if(orderNum<1){ 
        this.$toast.fail('已在最顶部不能再升啦~')
        return
       }
      }
      apieditGoodsTypeOrderNum({
        id: itemData.id,
        orderNum:orderNum,
      }).then((res) => {
        if (res.code == 200) {
          this.platformTypeList();
        }
      });
    },

    //删除商品分类:
    deleSort(itemData) {
      var that = this;
      Dialog.confirm({
        message: `确定删除“${itemData.title}”类型吗?`,
      })
        .then(() => {
          apiDelGoodsType({
            id: itemData.id,
          }).then((res) => {
            if (res.code == 200) {
              that.$toast.success("删除成功");
              that.platformTypeList();
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //添加分类确定按钮：
    sureAdd() {
      if (this.eidtorData) {
        //编辑操作
        this.getEditGoodsType();
      } else {
        //新增操作
        this.getAddGoodsType();
      }
    },
    //取消添加、编辑
    cancel() {
      this.eidtorData = "";
      this.inputSortName = "";
      this.showMask = false;
    },
    //店铺详情api获取商铺id：
    getShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.shopId = res.data.id;
        this.platformTypeList(); //通过商铺id获取店铺商品类型
      });
    },
    //获取商品类型：
    platformTypeList() {
      apiGetGoodsTypeList({
        id: this.shopId,
      }).then((res) => {
        this.resShopTypeList = res.data;
        console.log("商品类型:", this.resShopTypeList);
      });
    },
    //完成
    complete() {
      this.$router.push({
        path: "/pages/bGoodsManng",
        query: {
          //传递参数
          //   fromId: 0, //跳转新增规格页面0，编辑的话为1
        },
      });
    },
  },
  created() {},
  components: {
    [Dialog.name]: Dialog,
  },
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 20px auto;
  background: #ffffff;
  border-radius: 20px;
}
.inputWrapItem {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
}
.sizeName {
  font-size: 13px;
  font-weight: 600;
  color: #181818;
  margin-bottom: 3px;
  float: left;
}
.eidorIconRight {
  float: right;
}
.eidtoricon {
  width: 14px;
  height: 14px;
  margin-left: 20px;
}
.eidtoricon2 {
  transform: rotate(180deg);
}
.addSort {
  width: 105px;
  height: 40px;
  line-height: 40px;
  background: #fff;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 600;
  color: #181818;
  text-align: center;
  margin-left: 15px;
}
.add {
  width: 12px;
}
.finish {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 12px;
  left: 2.5%;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  bottom: 45vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.btn {
  width: 100px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}
.btnDele {
  background: rgb(207, 206, 206);
  color: #fff;
}
input {
  background: #f2f4fa;
  width: 85%;
  height: 38px;
  margin-left: 15px;
  border-radius: 15px;
  outline: none;
  border: 0px;
  padding-left: 10px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
</style>
